<!DOCTYPE html>
<HTML>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="/js/jquery.min.js?v=2.1.4"></script>
    <head th:include="include :: header"></head>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script src="/js/plugins/summernote/summernote.js"></script>
    <script src="/js/plugins/summernote/summernote-zh-CN.min.js"></script>
    <script src="/js/ajax-util.js"></script>
    <script type="text/javascript">


        function time() {
                var picker1 = $('#datetimepicker1').datetimepicker({
                    format: 'YYYY-MM-DD HH:mm:ss',
                    locale: moment.locale('zh-cn'),
                    //minDate: '2016-7-1'
                });
                var picker2 = $('#datetimepicker2').datetimepicker({
                    format: 'YYYY-MM-DD HH:mm:ss',
                    locale: moment.locale('zh-cn')
                });
                //动态设置最小值
                picker1.on('dp.change', function (e) {
                    picker2.data('DateTimePicker').minDate(e.date);
                });
                //动态设置最大值
                picker2.on('dp.change', function (e) {
                    picker1.data('DateTimePicker').maxDate(e.date);
                });

        }

        function e1(){
            var  accommodationCount =$("#accommodationCount").val();
            var  diningRoomCount =$("#diningRoomCount").val();
            var accommodationFood =$("#accommodationFood").val();

            // 路径配置
            require.config({
                paths: {
                    echarts: 'http://echarts.baidu.com/build/dist'
                }
            });

            // 使用
            require(
                [
                    'echarts',
                    'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
                    'echarts/chart/funnel'
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('m1'));

                    // 指定图表的配置项和数据
                    option = {
                        title : {
                          //  text: '入驻农家统计来源',
                          //  subtext: '线上商城',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            left: 'center',
                            bottom: 100,
                            data: ['美食+住宿','美食','住宿']
                        },
                        series : [
                            {
                                name: '来源',
                                type: 'pie',
                                radius : '65%',
                                center: ['50%', '50%'],
                                data:[
                                    {value:accommodationFood, name:'美食+住宿'},
                                    /*  {value:310, name:'邮件营销'},
                                      {value:234, name:'联盟广告'},*/
                                    {value:diningRoomCount, name:'美食'},
                                    {value:accommodationCount, name:'住宿'}
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                }
            );
        }
        function e2(){
            require.config({
                paths: {
                    echarts: 'http://echarts.baidu.com/build/dist'
                }
            });

            // 使用
            require(
                [
                    'echarts',
                    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                    'echarts/chart/line' // 使用曲线状图就加载曲线模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('m2'));

                    option = {
                        title : {
                            text: '农家入驻统计数量',
                            //subtext: '数据来自网络'
                        },
                        xAxis: {
                            type: 'category',
                            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月' ,'八月' ,'九月' , '十月' , '十一月' , '十二月']
                        },
                        yAxis: {
                            type: 'value',
                        },
                        series: [{
                            data: [20, 32, 91, 34, 90, 30, 20],
                            type: 'line'
                        }]
                    };


                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
            );

        }
        function init(){
            e1();
            e2();
            time();
        }
    </script>

</head>
<div th:include="include :: footer"></div>
<body onLoad="init()">
<div class="ibox">
    <div class='col-sm-6'>
        <div class="form-group">
            <label>选择开始时间：</label>
            <div class='input-group date' id='datetimepicker1'>
                <input id="beginTime" type='text' class="form-control"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-sm-6'>
        <div class="form-group">
            <label>选择结束时间：</label>
            <div class='input-group date' id='datetimepicker2'>
                <input id="endTime" type='text' class="form-control"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>

    <div class="ibox-body">
        <input type="hidden" th:value="${accommodationCount}" id="accommodationCount"/>
        <input type="hidden" th:value="${diningRoomCount}" id="diningRoomCount"/>
        <input type="hidden" th:value="${accommodationFood}" id="accommodationFood"/>
        <!-- 饼图 -->
        <div id="m1" style="width: 45%;height:400px; float: right"></div>

        <!-- 折线图 -->
        <div id="m2" style="width: 55%;height:400px; float:left;"></div>
    </div>
</div>
</body>
</HTML>